function buildAjaxObject(){
	var ajaxRequest;  // Ajax object;
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Browser do not support Ajax
				alert("Your browser doesn't support Ajax!");
				return false;
			}
		}
	}	
	return ajaxRequest;
}

function showAlbum(){
	var snapcolumn=document.getElementById("snapshot");
	var root=document.getElementById("right_column");
	if(snapcolumn.className=="inactive"){
		var all = root.getElementsByTagName("div");
		for(var i=0;i<all.length;i++){
			if(all[i].className=="active"){
				all[i].className="inactive";
				break;
			}
		}
		snapcolumn.className="active";
	}

	var ajaxObj=buildAjaxObject();
	ajaxObj.onreadystatechange=function(){
		if(ajaxObj.readyState==1){
			snapcolumn.getElementsByTagName('span')[0].id="waiting";
			snapcolumn.getElementsByTagName('span')[0].innerHTML="Please wait!!";						
		}		
		if(ajaxObj.readyState==4){ // Get the data from the server's response
			
			var data=ajaxObj.responseXML;
			snapcolumn.innerHTML="";
			createAlbumlist(snapcolumn, data);			
		}
	}
	ajaxObj.open("GET", "/footprint/album.do?method=browse", true);
	ajaxObj.send(null);		
}

function createAlbumlist(element, data){
	var table, row, cell, album, span;
	table=document.createElement("table");
	table.id="albumlist";
	element.appendChild(table);
	h3=document.createElement("h3");
	h3.innerHTML="Albums";
	table.appendChild(h3);
	
	var albums=data.getElementsByTagName("album");
	for(var i=0;i<albums.length;i++){
		album=albums[i];
		row=table.insertRow(i);
		cell=row.insertCell(0);
		var albumName=album.getElementsByTagName("albumName")[0];
		
		var a = document.createElement("a");
		a.setAttribute("href", "javascript: showSnaps("+album.getElementsByTagName("albumId")[0].childNodes[0].nodeValue+");");
		a.innerHTML=albumName.childNodes[0].nodeValue;
		cell.appendChild(a);
		
		cell=row.insertCell(1);
		var createAt=album.getElementsByTagName("createdAt")[0];
		cell.innerHTML=createAt.childNodes[0].nodeValue;
	}
}

function showSnaps(albumid){
	var snapcolumn=document.getElementById("snapshot");
	var root=document.getElementById("right_column");
	if(snapcolumn.className=="inactive"){
		var all = root.getElementsByTagName("div");
		for(var i=0;i<all.length;i++){
			if(all[i].className=="active"){
				all[i].className="inactive";
				break;
			}
		}
		snapcolumn.className="active";
	}
	
	snapcolumn.appendChild(document.createElement("span"));
	
	var ajaxObj=buildAjaxObject();
	ajaxObj.onreadystatechange=function(){
		if(ajaxObj.readyState==1){
			snapcolumn.getElementsByTagName('span')[0].id="waiting";
			snapcolumn.getElementsByTagName('span')[0].innerHTML="Please wait!!";						
		}		
		if(ajaxObj.readyState==4){ // Get the data from the server's response
			
			var data=ajaxObj.responseXML;
			snapcolumn.innerHTML="";
			createSnaplist(snapcolumn, data, albumid);			
		}
	}
	ajaxObj.open("GET", "/footprint/album.do?method=view&albumid="+albumid, true);
	ajaxObj.send(null);
}

function createSnaplist(element, data, albumid){
	var table, row, cell, albumId, span, delbutt, delbutttxt;
	table=document.createElement("table");
	table.id="snaplist";
	element.appendChild(table);
	h3=document.createElement("h3");
	h3.innerHTML="Snapshots";
	table.appendChild(h3);
	
	var snaps=data.getElementsByTagName("snap");
	for(var i=0;i<snaps.length;i++){
		snap=snaps[i];
		row=table.insertRow(i);
		
		var snapId=snap.getElementsByTagName("snapId")[0];
		
		cell=row.insertCell(0);
		var img = document.createElement("img");
		
		img.setAttribute('src', '/footprint/getSnapshot.do?isprofile=0&imageid='+snapId.childNodes[0].nodeValue);
		img.setAttribute('height', '100px');
		img.setAttribute('width', '75px');
		cell.appendChild(img);
		
		cell=row.insertCell(1);
		var snapName=snap.getElementsByTagName("snapName")[0];
		
		var a = document.createElement("a");
		a.setAttribute("href", "/footprint");
		a.innerHTML=snapName.childNodes[0].nodeValue;
		cell.appendChild(a);
		
		cell=row.insertCell(2);
		var snapDate=snap.getElementsByTagName("snapDate")[0];
		cell.innerHTML=snapDate.childNodes[0].nodeValue;
		
		cell=row.insertCell(3);
		
		var delbutt = document.createElement("a");
		delbutt.setAttribute("href", "/footprint/snap.do?method=delete&snapshotid="+snapId.childNodes[0].nodeValue);
		delbutt.innerHTML="delete";
		cell.appendChild(delbutt);
	}

	var addnew = document.createElement('button');
	var buttext = document.createTextNode('Add New');
	addnew.appendChild(buttext);
	addnew.setAttribute("onclick", "createSnapUploadPage(document.getElementById('snapshot'), "+albumid+");");
	element.appendChild(addnew);	
}

function createSnapUploadPage(element, albumid){
	var pageStr="<form method='post' action='"
	+"/footprint/uploadSnapAction.do?isprofile=0&albumId="+albumid+"' name='uploadSnapForm' enctype='multipart/form-data'>"
	+"<div style='font-size:18px; margin-bottom:5px; color:#726257;'>"
	+"Upload your profile photo\n</div>"
	+"<table>\n<tr>\n"
	+"<td>Photo: </td>\n <td colspan='2'>\n<input type='file' name='photo' value='${filename}'/>\n</td>\n</tr>\n"
	+"<tr>\n<td colspan='3' align='center'>\n<input type='submit' class='submit' name='Upload File' value='Upload File'/>\n</td>\n</tr>"
	+"</table>";

	element.innerHTML=pageStr;
}

function showFriend(){
	var friendcolumn=document.getElementById("friend");
	var root=document.getElementById("right_column");
	if(friendcolumn.className=="inactive"){
		var all = root.getElementsByTagName("div");
		for(var i=0;i<all.length;i++){
			if(all[i].className=="active"){
				all[i].className="inactive";
				break;
			}
		}
		friendcolumn.className="active";
	}

	var ajaxObj=buildAjaxObject();
	ajaxObj.onreadystatechange=function(){
		if(ajaxObj.readyState==2){
			friendcolumn.getElementsByTagName('span')[0].id="waiting";
			friendcolumn.getElementsByTagName('span')[0].innerHTML="Please wait!!";						
		}		
		if(ajaxObj.readyState==4){ // Get the data from the server's response
			
			var data=ajaxObj.responseXML;
			friendcolumn.innerHTML="";
			createFriendlist(friendcolumn, data);			
		}
	}
	ajaxObj.open("GET", "/footprint/friend.do?method=browse", true);
	ajaxObj.send(null);		
}

function createFriendlist(element, data){
	var table, row, cell, album, span;
	table=document.createElement("table");
	table.id="friendlist";
	element.appendChild(table);
	h3=document.createElement("h3");
	h3.innerHTML="Friends";
	table.appendChild(h3);
	
	var friends=data.getElementsByTagName("friend");
	for(var i=0;i<friends.length;i++){
		friend=friends[i];
		row=table.insertRow(i);
		
		var friendId=friend.getElementsByTagName("friendId")[0];
		
		cell=row.insertCell(0);
		var img = document.createElement("img");
		
		img.setAttribute('src', '/footprint/getSnapshot.do?isprofile=1&userid='+friendId.childNodes[0].nodeValue);
		img.setAttribute('height', '50px');
		img.setAttribute('width', '50px');
		cell.appendChild(img);
		
		cell=row.insertCell(1);
		var friendName=friend.getElementsByTagName("friendName")[0];
		
		var a = document.createElement("a");
		a.setAttribute("href", "/footprint");
		a.innerHTML=friendName.childNodes[0].nodeValue;
		cell.appendChild(a);
		
		cell=row.insertCell(2);
		var createdAt=friend.getElementsByTagName("createdAt")[0];
		cell.innerHTML=createdAt.childNodes[0].nodeValue;
		
		cell=row.insertCell(3);
		
		var defriendbutt = document.createElement("a");
		defriendbutt.setAttribute("href", "/footprint/friend.do?method=delete&fid="+friendId.childNodes[0].nodeValue);
		defriendbutt.innerHTML="delete";
		cell.appendChild(defriendbutt);
	}
	
	var addnew = document.createElement('button');
	var buttext = document.createTextNode('Find new friend');
	addnew.appendChild(buttext);
	addnew.setAttribute("onclick", "showAllFriend();");
	element.appendChild(addnew);
}

function showAllFriend(){
	var friendcolumn=document.getElementById("friend");
	var root=document.getElementById("right_column");
	if(friendcolumn.className=="inactive"){
		var all = root.getElementsByTagName("div");
		for(var i=0;i<all.length;i++){
			if(all[i].className=="active"){
				all[i].className="inactive";
				break;
			}
		}
		friendcolumn.className="active";
	}

	var ajaxObj=buildAjaxObject();
	ajaxObj.onreadystatechange=function(){
		if(ajaxObj.readyState==2){
			friendcolumn.getElementsByTagName('span')[0].id="waiting";
			friendcolumn.getElementsByTagName('span')[0].innerHTML="Please wait!!";						
		}		
		if(ajaxObj.readyState==4){ // Get the data from the server's response
			
			var data=ajaxObj.responseXML;
			friendcolumn.innerHTML="";
			createAllFriendslist(friendcolumn, data);			
		}
	}
	ajaxObj.open("GET", "/footprint/friend.do?method=browseall", true);
	ajaxObj.send(null);
}

function createAllFriendslist(element, data){
	var table, row, cell, album, span;
	table=document.createElement("table");
	table.id="userlist";
	element.appendChild(table);
	h3=document.createElement("h3");
	h3.innerHTML="Friends";
	table.appendChild(h3);
	
	var users=data.getElementsByTagName("user");
	for(var i=0;i<users.length;i++){
		user=users[i];
		row=table.insertRow(i);
		
		var userId=user.getElementsByTagName("userId")[0];
		
		cell=row.insertCell(0);
		var img = document.createElement("img");
		
		img.setAttribute('src', '/footprint/getSnapshot.do?isprofile=1&userid='+userId.childNodes[0].nodeValue);
		img.setAttribute('height', '50px');
		img.setAttribute('width', '50px');
		cell.appendChild(img);
		
		cell=row.insertCell(1);
		var userName=user.getElementsByTagName("userName")[0];
		
		var a = document.createElement("a");
		a.setAttribute("href", "/footprint");
		a.innerHTML=userName.childNodes[0].nodeValue;
		cell.appendChild(a);
		
		cell=row.insertCell(2);
		var location=user.getElementsByTagName("location")[0];
		cell.innerHTML=location.childNodes[0].nodeValue;
		
		cell=row.insertCell(3);
		
		var defriendbutt = document.createElement("a");
		defriendbutt.setAttribute("href", "/footprint/friend.do?method=add&friendId="+userId.childNodes[0].nodeValue);
		defriendbutt.innerHTML="add";
		cell.appendChild(defriendbutt);
	}
	
	var addnew = document.createElement('button');
	var buttext = document.createTextNode('Add New');
	addnew.appendChild(buttext);
	addnew.setAttribute("onclick", "createNewFriendPage()");
	element.appendChild(addnew);
}

function showSetting(){
	var settingcolumn=document.getElementById("setting");
	var root=document.getElementById("right_column");
	if(settingcolumn.className=="inactive"){
		var all = root.getElementsByTagName("div");
		for(var i=0;i<all.length;i++){
			if(all[i].className=="active"){
				all[i].className="inactive";
				break;
			}
		}
		settingcolumn.className="active";
	}

	var ajaxObj=buildAjaxObject();
	ajaxObj.onreadystatechange=function(){
		if(ajaxObj.readyState==1){
			settingcolumn.getElementsByTagName('span')[0].id="waiting";
			settingcolumn.getElementsByTagName('span')[0].innerHTML="Please wait!!";						
		}		
		if(ajaxObj.readyState==4){ // Get the data from the server's response
			
			var data=ajaxObj.responseXML;
			settingcolumn.innerHTML="";
			createSetting(settingcolumn, data);			
		}
	}
	ajaxObj.open("GET", "/footprint/user.do?method=view", true);
	ajaxObj.send(null);
}

function createSetting(element, data){
	var table, row, cell, album, span;
	div=document.createElement("div");
	div.id="settinglist";
	element.appendChild(div);
	h3=document.createElement("h3");
	h3.innerHTML="Settings";
	div.appendChild(h3);
	content_div=document.createElement("div");
	div.appendChild(content_div);
	
	
	var settings=data.getElementsByTagName("user");

	var pageStr="<form action='/footprint/user.do?method=update' name='registerForm' method='post'>" 
			   +"<table>"
			   +"<tr>"
			   +"<td>"
			   +"First Name:"
			   +"</td>" 
			   +"<td style='padding-bottom:3px;'><input type='text' class='text_field' name='userFName' "
			   +"style='width:180px; height: 30px; color:#00BFF3; border: 3px solid #00BFF3;' value='"
			   + settings[0].getElementsByTagName("userfname")[0].childNodes[0].nodeValue+"' "
			   +"/>"
			   +"</td>"			                    
			   +"</tr>" 
			   +"<tr>" 
			   +"<td>"
			   +"Last Name:"
			   +"</td>" 
			   +"<td style='padding-bottom:3px;'><input type='text' class='text_field' name='userLName'"
			   +"style='width:180px; height: 30px; color:#00BFF3; border: 3px solid #00BFF3;' value='"+settings[0].getElementsByTagName("userlname")[0].childNodes[0].nodeValue+"' "
			   +"/>"
			   +"</td>" 
			   +"</tr>" 
			   +"<tr>"
	           +"<td>"
			   +"Email:"
			   +"</td>"  
			   +"<td style='padding-bottom:3px;'><input type='text' class='text_field' name='email'"
			   +"style='width:180px; height: 30px; color:#00BFF3; border: 3px solid #00BFF3;' value='"+settings[0].getElementsByTagName("userEmail")[0].childNodes[0].nodeValue+"' "
			   +"/>"
			   +"</td>" 
			   +"</tr>" 
			   +"<tr>" 
               +"<td>"
			   +"Password:"
			   +"</td>" 
			   +"<td style='padding-bottom:3px;'>"  
			   +"<input type='password' name='password' "
			   +"style='width:180px; height: 30px; color:#00BFF3; border: 3px solid #00BFF3;'/>" 
		       +"</td>" 
			   +"</tr>" 
			   +"<tr>" 
			   +"<td>"
			   +"Gender:"
			   +"</td>" 
               +"<td style='padding-bottom:3px;'>"
               +"<select name='gender' style='width:80px; height: 30px; color:#00BFF3; border: 3px solid #00BFF3;' >"
			   +"<option value='0' >Male</option>"
			   +"<option value='1' >Female</option>"
               +"</select>"
	           +"</td>" 
               +"</tr>" 
			   +"<tr>"
			   +"<td>"
			   +"Birth year:"
			   +"</td>" 
			   +"<td style='padding-bottom:3px;'>"		                	
			   +"<select id='birth_year' name='year' style='width:60px; height: 30px; color:#00BFF3; border: 3px solid #00BFF3;' onchange='return editBirthdayOption();'>";
	for(var i=2008;i>=1900;i--){
	
		if(i==parseInt(settings[0].getElementsByTagName("birthyear")[0].childNodes[0].nodeValue)){
			pageStr=pageStr+"<option value='"+i+"' selected>"+i+"</option>";
		}else{
			pageStr=pageStr+"<option value='"+i+"'>"+i+"</option>";
		}		
	}

	pageStr=pageStr+"</select>"
		    +"</td>" 
            +"</tr>"
            +"<tr>"
			+"<td>"
 		    +"Birth month:"
			+"</td>"
			+"<td>" 
			+"<select id='birth_month' name='month' style='width:70px; height: 30px; color:#00BFF3; border: 3px solid #00BFF3;' onchange='return editBirthdayOption();'>";
	for(var i=1;i<13;i++){
	
		if(i==parseInt(settings[0].getElementsByTagName("birthmonth")[0].childNodes[0].nodeValue)){
			pageStr=pageStr+"<option value='"+i+"' selected>"+i+"</option>";
		}else{
			pageStr=pageStr+"<option value='"+i+"'>"+i+"</option>";
		}		
	}

	pageStr=pageStr+"</select>"
			    +"</td>" 
            +"</tr>"
            +"<tr>"
			+"<td>"
 		    +"Birth day:"
			+"</td>"
			+"<td>" 
				   +"<select id='birth_day' name='day' style='width:55px; height: 30px; color:#00BFF3; border: 3px solid #00BFF3;' >";

	for(var i=1;i<=31;i++){
		if(i==parseInt(settings[0].getElementsByTagName("birthday")[0].childNodes[0].nodeValue)){
			pageStr=pageStr+"<option value='"+i+"' selected>"+i+"</option>";
		}else{
			pageStr=pageStr+"<option value='"+i+"'>"+i+"</option>";
		}
	}	

	pageStr=pageStr+"</select>"
			       +" </td> "
			       +"</tr>"
				   +"<tr>"
				   +"<td>"
				   +"Location:"
				   +"</td>" 
			       +"<td style='padding-bottom:3px;'>"
			       +"<input type='text' class='text_field' name='location'"
			       +"style='width:180px; height: 30px; color:#00BFF3; border: 3px solid #00BFF3;' value='"+settings[0].getElementsByTagName("location")[0].childNodes[0].nodeValue+"' "
			       +"/>"
			       +"</td>" 
			       +"</tr>" 
			       +" </table> "
			       +"<div style='margin-top:15px; text-align:center;'>" 
			       +"<html:errors property='userExist'/>"
			       +"<br/>"
			       +"<input class='submit' type='submit' value='submit'/>" 
			       +"</div> "
				   +"</form> ";
	
	content_div.innerHTML=pageStr;
}